<template>
    <div
        style="padding-top: 40px"
        v-loading="pageLoading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div style="margin: 5px 10px 30px 15px">
            <!-- 1. 基础信息 -->
            <div>
                <!-- 标题 -->
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">基础信息</h3>
                    </el-col>
                </el-row>

                <!-- 内容 -->
                <el-form :model="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="产品编号">
                                <el-input v-model="infoForm.materialId" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="产品名称">
                                <el-input v-model="infoForm.materialName" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="所属分类">
                                <el-input v-model="infoForm.typeName" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="所属基地">
                                <el-input v-model="infoForm.baseName" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="所属商家">
                                <el-input v-model="infoForm.createMan" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 2.农资购买记录 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">农资购买记录</h3>
                    </el-col>
                </el-row>

                <el-row style="margin: 30px 30px 30px 0px">
                    <el-col :span="14">
                        <TableList
                            tableRef="table"
                            ref="multipleTable"
                            :checkBoxEnable="false"
                            :showPagination="false"
                            :data="nzgmjlDataList ? nzgmjlDataList : []"
                            :listConfig="nzgmjlResultColConfig"
                            :listLoading="nzgmjlListLoading"
                        ></TableList>
                    </el-col>
                </el-row>
            </div>

            <!-- 3.基地操作记录 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">基地操作记录</h3>
                    </el-col>
                </el-row>

                <el-row style="margin: 30px 30px 30px 0px">
                    <el-col :span="14">
                        <TableList
                            tableRef="table"
                            ref="multipleTable"
                            :checkBoxEnable="false"
                            :showPagination="false"
                            :data="jdczjlDataList ? jdczjlDataList : []"
                            :listConfig="jdczjlResultColConfig"
                            :listLoading="jdczjlListLoading"
                        ></TableList>
                    </el-col>
                </el-row>
            </div>
            
            <!-- 4.购买方 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">购买方</h3>
                    </el-col>
                </el-row>

                <el-row style="margin: 30px 30px 30px 0px">
                    <el-col :span="14">
                        <TableList
                            tableRef="table"
                            ref="multipleTable"
                            :checkBoxEnable="false"
                            :showPagination="false"
                            :data="gmfDataList ? gmfDataList : []"
                            :listConfig="gmfResultColConfig"
                            :listLoading="gmfListLoading"
                        ></TableList>
                    </el-col>
                </el-row>
            </div>


        </div>
    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import TableList from '../../../components/TableList';

import { NZGMJL_RESULT_ITEMS, JDCZJL_RESULT_ITEMS, GMF_RESULT_ITEMS} from './config';

export default {
    components: {
        TableList
    },
    data() {
        return {
            pageLoading: false,
            isEdit: true,

            //- 基础信息
            infoForm: {
                materialName: '', // 产品名称
                materialId: '', //产品编号
                typeName: '', //所属分类
                baseName: '', //所属基地
                createMan: '' //所属商家
            },
            //- 农资购买记录
            nzgmjlListLoading: false, // 数据列表显示状态
            nzgmjlResultColConfig: NZGMJL_RESULT_ITEMS,
            nzgmjlDataList: [], //  数据列表

            //- 基地操作记录
            jdczjlListLoading: false, // 数据列表显示状态
            jdczjlResultColConfig: JDCZJL_RESULT_ITEMS,
            jdczjlDataList: [], //  数据列表

            //- 购买方
            gmfListLoading: false, // 数据列表显示状态
            gmfResultColConfig: GMF_RESULT_ITEMS,
            gmfDataList: [], //  数据列表


            //- 公用
            pageFlag: '',
            pageData: null
        };
    },
    mounted() {
        var itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        if (type == 2) {
            var id = itemData.materialId;

            this.getPageDeail(id); // 获取基本信息
            this.getDetails_jdczjl(id); // 获取基地操作记录
            this.getDetails_nzgmjl(id); // 获取农资购买记录
            this.getDetails_gmf(id); // 获取购买方
        }

        this.dialogType = type;
    },

    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleClose() {
            this.dataForm = {};
            this.$refs['dataForm'].resetFields();
        },
        // 获取页面详情
        getPageDeail(materialId) {
            //详情
            var _that = this;

            var tick;
            let params = {
                materialId: materialId
            };

            _that.pageLoading = true;

            //详情
            API.foodSafetyManger.getDetails(params).then((res) => {
                console.log(res);

                _that.pageData = res.result;
                _that.infoForm=res.result;
                _that.pageLoading = false;
            });
        },

         // 获取页面详情-基地操作记录
        getDetails_jdczjl(materialId) {
           
            var _that = this;

            var tick;
            let params = {
                materialId: materialId
            };

            //处理列表 传递参数
            params.pageNum = this.pageNum;
            params.pageSize = 1000;


            _that.jdczjlListLoading = true;

           
            API.foodSafetyManger.getDetails_jdczjl(params).then((res) => {
                console.log(res);

                _that.jdczjlDataList=res.result.rows;
                _that.jdczjlListLoading = false;
            });
        },

        // 获取页面详情-农资购买记录
        getDetails_nzgmjl(materialId) {
           
            var _that = this;

            var tick;
            let params = {
                materialId: materialId
            };
             //处理列表 传递参数
            params.pageNum = this.pageNum;
            params.pageSize = 1000;

            _that.nzgmjlListLoading = true;

           
            API.foodSafetyManger.getDetails_nzgmjl(params).then((res) => {
                console.log(res);

                _that.nzgmjlDataList=res.result.rows;
                _that.nzgmjlListLoading = false;
            });
        },
         // 获取页面详情-购买方
        getDetails_gmf(materialId) {
           
            var _that = this;

            var tick;
            let params = {
                materialId: materialId
            };
              //处理列表 传递参数
            params.pageNum = this.pageNum;
            params.pageSize = 1000;

            _that.gmfListLoading = true;

           
            API.foodSafetyManger.getDetails_gmf(params).then((res) => {
                console.log(res);

                _that.gmfDataList=res.result.rows;
                _that.gmfListLoading = false;
            });
        },

        closePage() {
            this.$router.go(-1);
        }
    }
};
</script>